﻿{% extends "base/index.html" %}

{% block css %}
<link rel="stylesheet" href="/static/ztree3/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
{% endblock %}

{% block center %}

<!--用户信息-->
<div class="panel panel-default center-top" style="min-width:1300px;">
  <div class="panel-heading">
      <div class="row" style="padding-top:5px;padding-left:10px;">
          <div class="col-sm-6">
              <a href="javascript:;" class="btn btn-sm btn-success" data-toggle="modal" data-target="#roleModal"> 添加角色 </a>
          </div>
      </div>
  </div>
  <div class="panel-body">
        <div style="margin-bottom: 10px;">
            <div class="col-sm-12">
                <table class="table table-hover table-bordered">
                  <thead>
                    <tr style="background-color: #f5f5f5;">
                      <th>ID</th>
                      <th>角色</th>
                      <th>描述</th>
                      <th>授权</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                  {% for i in data_list %}
                    <tr name="tbody">
                      <td>{{ i.id }}</td>
                      <td>{{ i.role }}</td>
                      <td>{{ i.role_msg }}</td>
                      <td>
                          <a href="javascript:;" style="text-decoration:none;" name="roleperms" role_id="{{ i.id }}">权限</a>&nbsp;&nbsp;&nbsp;
                          <a href="javascript:;" style="text-decoration:none;" name="roleasset" role_id="{{ i.id }}">资产</a>&nbsp;&nbsp;&nbsp;
                      </td>
                      <td style="padding-left:5px;">
                        <a href="javascript:;" style="text-decoration:none;" name="edit-role" role_id="{{ i.id }}" data-toggle="tooltip" data-placement="left" title="修改"><span class="fa fa-pencil"></span> </a>&nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" style="text-decoration:none;" name="del-role" role_id="{{ i.id }}" data-toggle="tooltip" data-placement="right" title="删除"><span class="fa fa-trash"></span> </a>
                      </td>
                    </tr>
                  {% endfor %}
                  </tbody>
                </table>
                <div class="text-right" style="margin-top:-30px;padding-right:9%">
                    <ul class="pagination" id="pager">
                      <li class="previous"><a href="/rbac/role/1/">首页</a></li>
                      {#上一页按钮开始#}
                      {# 如果当前页有上一页#}
                      {% if data_list.has_previous %}
                      {#  当前页的上一页按钮正常使用#}
                      <li class="previous"><a href="/rbac/role/{{ data_list.previous_page_number }}/">上一页</a></li>
                      {% else %}
                      {# 当前页的不存在上一页时,上一页的按钮不可用#}
                      <li class="previous disabled"><a href="javascript:;">上一页</a></li>
                      {% endif %}
                      {#上一页按钮结束#}
                      {# 页码开始#}
                      {% for num in page_list  %}
                          {% if num == currentPage %}
                          <li class="item active"><a href="/rbac/role/{{ num }}/">{{ num }}</a></li>
                          {% else %}
                          <li class="item"><a href="/rbac/role/{{ num }}/">{{ num }}</a></li>
                          {% endif %}
                      {% endfor %}
                      {#页码结束#}
                      {# 下一页按钮开始#}
                      {% if data_list.has_next %}
                      <li class="next"><a href="/rbac/role/{{ data_list.next_page_number }}/">下一页</a></li>
                      {% else %}
                      <li class="next disabled"><a href="javascript:;">下一页</a></li>
                      {% endif %}
                      <li class="previous"><a href="/rbac/role/{{ page_nums }}/">尾页</a></li>
                      {# 下一页按钮结束#}
                    </ul>
                </div>
            </div>

        </div>
  </div>
</div>

{% endblock %}

<!-- Modal -->
{% block modal %}

<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="roleModalLabel">添加角色</h4>
      </div>
      <div class="modal-body">
          <div class="form-group">
            <label >角色名称</label>
            <input  class="form-control"  placeholder="角色名称" id="role">
          </div>
          <div class="form-group">
            <label >描述</label>
            <input  class="form-control"  placeholder="描述" id="role-msg">
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-role">提交</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="edit-roleModal" tabindex="-1" role="dialog" aria-labelledby="edit-roleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="edit-roleModalLabel">修改角色</h4>
      </div>
      <div class="modal-body">
         <form>
          <div class="form-group">
            <label >角色名称</label>
            <input  class="form-control"  placeholder="角色名称" id="edit-role">
          </div>
          <div class="form-group">
            <label >描述</label>
            <input  class="form-control"  placeholder="描述" id="edit-role-msg">
          </div>
          <div class="form-group" style="display:none" id="edit-pmenu-div">
            <label >父节点</label>
              <select class="form-control" id="edit-pmenu-id">
                  {% for menu in menu_info %}
                  <option value="{{ menu.menu_id }}">{{ menu.menu_title }}</option>
                  {% endfor %}
              </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-edit-role">提交</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="edit-rolepermsModal" tabindex="-1" role="dialog" aria-labelledby="edit-rolepermsModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="edit-rolepermsModalLabel">权限授权</h4>
      </div>
      <div class="modal-body" style="max-height:500px;overflow:auto;">
        <ul id="treeperms" class="ztree"></ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-edit-roleperms">提交</button>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="edit-roleassetModal" tabindex="-1" role="dialog" aria-labelledby="edit-roleassetModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top:135px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="edit-roleassetModalLabel">资产授权</h4>
      </div>
      <div class="modal-body" style="max-height:500px;overflow:auto;">
        <ul id="treeasset" class="ztree"></ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="sub-edit-roleasset">提交</button>
      </div>
    </div>
  </div>
</div>


{% endblock  %}

{% block js %}
    <script type="text/javascript" src="/static/mystyle/js/rbac.js"></script>
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/ztree3/js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" >

    /*授权
    $(document).ready(function(){
        $('td a[name="rolemenu"]').click(function(){
            var role_id = $(this).attr("role_id");
            $.post("/rbac/getrolemenu/",{'role_id':role_id},function(data){
                var ret = eval('(' + data + ')');
                if(ret.status=="perms_false"){
                    spop({
                        template: "权限不足，请联系管理员",
                        style: 'warning',
                        autoclose: 3000
                    });
                }else {
                    var info = ret.info;
                    var setting = {
                        view: {
                            addHoverDom: false,
                            removeHoverDom: false,
                            selectedMulti: false,
                        },
                        check: {
                            enable: true
                        },
                        data: {
                            simpleData: {
                                enable: true
                            }
                        },
                        edit: {
                            enable: false
                        }
                    };
                    var zNodes = info;
                    $.fn.zTree.init($("#treemenu"), setting, zNodes);
                    $("#sub-edit-rolemenu").attr('role_id', role_id);
                    $("#edit-rolemenuModal").modal('show');
                }
            });
        });
    });

    //角色菜单授权
    $("#sub-edit-rolemenu").click(function(){
        var role_id = $(this).attr("role_id");
        var treeObj=$.fn.zTree.getZTreeObj("treemenu");
        var nodes = treeObj.getCheckedNodes(true);
        var node_ids =new Array();
        for(var i=0;i<nodes.length;i++){
           node_ids[i] = nodes[i].id;
        }
        node_id_json = JSON.stringify(node_ids)
        $.post("/rbac/addrolemenu/",{'node_id_json':node_id_json,'role_id':role_id},function(data){
            var ret = eval('(' + data + ')');
            if(ret.status=="perms_false"){
                spop({
                    template: "权限不足，请联系管理员",
                    style: 'warning',
                    autoclose: 3000
                });
            }else {
                $("#edit-rolemenuModal").modal('hide');
                    spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 3000
                    });
                    setTimeout("location.reload()",3000);
            }
        });
    });
*/
    //获取授权
    $(document).ready(function(){
        $('td a[name="roleperms"]').click(function(){
            var role_id = $(this).attr("role_id");
            $.post("/rbac/getroleperms/",{'role_id':role_id},function(data){
                var ret = eval('(' + data + ')');
                if(ret.status=="perms_false"){
                    spop({
                        template: "权限不足，请联系管理员",
                        style: 'warning',
                        autoclose: 3000
                    });
                }else {
                    var info = ret.info;
                    var setting = {
                        view: {
                            addHoverDom: false,
                            removeHoverDom: false,
                            selectedMulti: false,
                        },
                        check: {
                            enable: true
                        },
                        data: {
                            simpleData: {
                                enable: true
                            }
                        },
                        edit: {
                            enable: false
                        }
                    };
                    var zNodes = info;
                    $.fn.zTree.init($("#treeperms"), setting, zNodes);
                    $("#sub-edit-roleperms").attr('role_id', role_id);
                    $("#edit-rolepermsModal").modal('show');
                }
            });
        });
    });

    //角色权限授权
    $("#sub-edit-roleperms").click(function(){
        var role_id = $(this).attr("role_id");
        var treeObj=$.fn.zTree.getZTreeObj("treeperms");
        var nodes = treeObj.getCheckedNodes(true);
        var node_ids =new Array();
        for(var i=0;i<nodes.length;i++){
           node_ids[i] = nodes[i].id;
        }
        node_id_json = JSON.stringify(node_ids);
        $.post("/rbac/addroleperms/",{'node_id_json':node_id_json,'role_id':role_id},function(data){
            var ret = eval('(' + data + ')');
            if(ret.status=="perms_false"){
                    spop({
                        template: "权限不足，请联系管理员",
                        style: 'warning',
                        autoclose: 3000
                    });
                }else {
                    $("#edit-rolepermsModal").modal('hide');
                    spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 3000
                    });
                    setTimeout("location.reload()",3000);
            }
        });
    });


    //获取授权资产
    $(document).ready(function(){
        $('td a[name="roleasset"]').click(function(){
            var role_id = $(this).attr("role_id");
            $.post("/rbac/getroleasset/",{'role_id':role_id},function(data){
                var ret = eval('(' + data + ')');
                if(ret.status=="perms_false"){
                    spop({
                        template: "权限不足，请联系管理员",
                        style: 'warning',
                        autoclose: 3000
                    });
                }else {
                    var info = ret.info;
                    var setting = {
                        view: {
                            addHoverDom: false,
                            removeHoverDom: false,
                            selectedMulti: false,
                        },
                        check: {
                            enable: true
                        },
                        data: {
                            simpleData: {
                                enable: true
                            }
                        },
                        edit: {
                            enable: false
                        }
                    };
                    var zNodes = info;
                    $.fn.zTree.init($("#treeasset"), setting, zNodes);
                    $("#sub-edit-roleasset").attr('role_id', role_id);
                    $("#edit-roleassetModal").modal('show');
                }

            });
        });

    });

    //角色资产授权
    $("#sub-edit-roleasset").click(function(){
        var role_id = $(this).attr("role_id");
        var treeObj=$.fn.zTree.getZTreeObj("treeasset");
        var nodes = treeObj.getCheckedNodes(true);
        var node_ids =new Array();
        for(var i=0;i<nodes.length;i++){
           node_ids[i] = nodes[i].id;
        }
        node_id_json = JSON.stringify(node_ids)
        $.post("/rbac/addroleasset/",{'node_id_json':node_id_json,'role_id':role_id},function(data){
            var ret = eval('(' + data + ')');
            if(ret.status=="perms_false"){
                spop({
                    template: "权限不足，请联系管理员",
                    style: 'warning',
                    autoclose: 3000
                });
            }else {
                $("#edit-roleassetModal").modal('hide');
                spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 3000
                    });
                    setTimeout("location.reload()",3000);
            }
        });
    });

    </script>

{% endblock %}


